<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>超强计算器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            width: 260px;
            margin: 50px auto;
            border-collapse: collapse;
        }
        td{
            cursor: pointer;
            line-height: 30px;
            text-align: center;
            border: 1px solid #888;
        }
        td:hover{
            background-color: chocolate;
            box-shadow: 0 0 20px  chocolate;
        }

        td.monitor{
            text-align: right;
            padding: 10px 15px;
        }

        td.monitor:hover{
            background-color: #fffbf9;
        }

        td.monitor p{
            line-height: 20px;
            font-size: 20px;
            font-weight: bold;
        }

        td.monitor p:first-child{
            font-size: 14px;
            font-weight: normal;
        }

    </style>
</head>
<body>
<table class="calc">
    <tbody>
    <tr>
        <td class="monitor" colspan="5">
            <p id="L1"></p>
            <p id="L2">0</p>
        </td>
    </tr>
    <tr>
        <td>MC</td>
        <td>MR</td>
        <td>MS</td>
        <td>M+</td>
        <td>M-</td>
    </tr>
    <tr>
        <td>←</td>
        <td>CE</td>
        <td onclick="fn('clear')">C</td>
        <td>±</td>
        <td>√</td>
    </tr>
    <tr>
        <td onclick="numberInput('7')">7</td>
        <td onclick="numberInput('8')">8</td>
        <td onclick="numberInput('9')">9</td>
        <td onclick="optInput('/')">/</td>
        <td onclick="optInput('%')">%</td>
    </tr>
    <tr>
        <td onclick="numberInput('4')">4</td>
        <td onclick="numberInput('5')">5</td>
        <td onclick="numberInput('6')">6</td>
        <td onclick="optInput('*')">*</td>
        <td>1/x</td>
    </tr>
    <tr>
        <td onclick="numberInput('1')">1</td>
        <td onclick="numberInput('2')">2</td>
        <td onclick="numberInput('3')">3</td>
        <td onclick="optInput('-')">-</td>
        <td rowspan="2" onclick="calc()">=</td>
    </tr>
    <tr>
        <td colspan="2" onclick="numberInput('0')">0</td>
        <td>.</td>
        <td onclick="optInput('+')">+</td>
    </tr>
    </tbody>
</table>
</body>
<script type="text/javascript">
    var n1 = "";
    var n2 = "";
    var opt = "";
    var n3 = "";
    /**
     * 数字按键被点击时的响应
     * @param num
     */
    function numberInput(num) {
        if(opt == ""){
            if (n1.length < 6) {
                n1 += num;
                var p2 = document.getElementById("L2");
                p2.innerText = n1;
            }
        } else{
            if (n2.length <6){
                n2 += num;
                var p2 = document.getElementById("L2");
                p2.innerText = n2;
            }
        }
    }
    /**
     * 运算符按键被点击时的响应
     * @param param
     */
    function optInput(param) {
        opt = param;
        var p1 =document.getElementById("L1");
        p1.innerText = n1 + " " + opt;
    }
    /**
     * 等号按键被点击时的响应
     */
    function calc() {
        n1 = parseInt(n1);//把字符串转变成整数型
        n2 = parseInt(n2);
        switch (opt) {
            case "+":
                n3 = n1 + n2;
                break;
            case "*":
                n3 = n1 * n2;
                break;
            case "/":
                n3 = n1 / n2;
                break;
            case "-":
                n3 = n1 - n2;
                break;
            default:
                n3 = "输入错误";
        }
        var p1 = document.getElementById("L1");
        var p2 = document.getElementById("L2");
        p1.innerText= "";
        p2.innerText=n3;
        //重置变量
        n1 = "";
        n2 = "";
        n3 = "";
        opt= "";
    }
    /**
     * C功能按键被点击时的响应
     * @param fun
     */
    function fn(fun) {
        switch (fun) {
            case "clear":
                n1 = "";
                n2 = "";
                n3 = "";
                opt= "";
                var p1 = document.getElementById("L1");
                var p2 = document.getElementById("L2");
                p1.innerText= "";
                p2.innerText="0";
                break;
        }
    }
</script>
</html>